<!DOCTYPE html>
<html lang="en">
<head>
    <!-- author:陈志航 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生及老师课程安排-日历</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="app" v-cloak>
        <div class="in-body">
                <div class="top-class">

                    <div class="top-left-tips">
                        <span :class="{'change-color-tips':nowNumber==1}" @click="changeTips(1)">时间视图</span><span :class="{'change-color-tips':nowNumber==2}" class="class-left" @click="changeTips(2)">老师视图</span><span :class="{'change-color-tips':nowNumber==3}" class="class-left" @click="changeTips(3)">教室视图</span>
                        <div style="margin-top: 15px" class="word-day">
                                <span v-show="nowNumber==1" class="word-week" :class="{'color-word-ban':isActive==1}" @click="dayClick(1)">周</span><span class="word-week" v-show="nowNumber==1" :class="{'color-word-ban':isActive==2}" @click="dayClick(2)">月</span><span v-show="nowNumber==1" style="font-size: 11px;">双击下方表格空白处可排课</span>
                        </div>
                        
                    </div>
                    <div class="top-mid-title">
                        <p v-show="isActive==1" style="text-align: center;"><span @click="leftClick"  style="font-weight: 600">&lt;&nbsp;&nbsp;</span> {{nowYear}}年{{startTime}}-{{endTime}} <span style="font-weight: 600" @click="rightClick">&gt;&nbsp;&nbsp;</span></p>
                        <p  v-show="isActive==2" style="text-align: center;"><span @click="leftClickMonth" style="font-weight: 600">&lt;&nbsp;&nbsp;</span> {{nowYear}}年{{nowMonth}}月 <span style="font-weight: 600" @click="rightClickMonth">&gt;&nbsp;&nbsp;</span></p>
                        <div class="top-mid-color">
                            <div class="color-noclass"></div>
                            <span>未上课</span>
                            <div class="color-yesclass" style="margin-left:20px;"></div>
                            <span>已上课</span>
                        </div>
                    </div>
                    <div class="in-body-content">
                         <!-- 周视图 -->
                         <table style="border-collapse: collapse;" v-show="isActive==1">
                                <thead style="background-color: rgb(239, 243, 248);">
                                    <tr class="theard">
                                        <td>时间</td>
                                        <td>周一({{cupnowDateList[0]}})</td>
                                        <td>周二({{cupnowDateList[1]}})</td>
                                        <td>周三({{cupnowDateList[2]}})</td>
                                        <td>周四({{cupnowDateList[3]}})</td>
                                        <td>周五({{cupnowDateList[4]}})</td>
                                        <td>周六({{cupnowDateList[5]}})</td>
                                        <td>周日({{cupnowDateList[6]}})</td>
                                    </tr>
                                </thead>
                                <tbody class="tbody-class">
                                    <tr>
                                        <td style="text-align: center">上午</td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[0].weeks.morning">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[1].weeks.morning">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[2].weeks.morning">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[3].weeks.morning">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[4].weeks.morning">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[5].weeks.morning">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[6].weeks.morning">  {{item.time}}</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: center">中午</td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[0].weeks.afternoon">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[1].weeks.afternoon">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[2].weeks.afternoon">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[3].weeks.afternoon">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[4].weeks.afternoon">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[5].weeks.afternoon">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                            <div class="class-ban-day-blue" v-for="item in weekList[6].weeks.afternoon">  {{item.time}}</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: center">下午</td>
                                        <td @click="tdclick">
                                                <div class="class-ban-day-blue" v-for="item in weekList[0].weeks.evening">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                                <div class="class-ban-day-blue" v-for="item in weekList[1].weeks.evening">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                                <div class="class-ban-day-blue" v-for="item in weekList[2].weeks.evening">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                                <div class="class-ban-day-blue" v-for="item in weekList[3].weeks.evening">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                                <div class="class-ban-day-blue" v-for="item in weekList[4].weeks.evening">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                                <div class="class-ban-day-blue" v-for="item in weekList[5].weeks.evening">  {{item.time}}</div>
                                        </td>
                                        <td @click="tdclick">
                                                <div class="class-ban-day-blue" v-for="item in weekList[6].weeks.evening">  {{item.time}}</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        <!-- 月视图 -->
                        <table style="border-collapse: collapse;" v-show="isActive==2">
                                <thead style="background-color: rgb(239, 243, 248);">
                                <tr class="theard">
                                        <td>周一({{cupnowDateList[0]}})</td>
                                        <td>周二({{cupnowDateList[1]}})</td>
                                        <td>周三({{cupnowDateList[2]}})</td>
                                        <td>周四({{cupnowDateList[3]}})</td>
                                        <td>周五({{cupnowDateList[4]}})</td>
                                        <td>周六({{cupnowDateList[5]}})</td>
                                        <td>周日({{cupnowDateList[6]}})</td>
                                </tr>
                            </thead>
                            <tbody class="tbody-class">
                                <tr v-for="(n,i) in dataList.length/7">
                                    <td @click="tdclick" class="class-relative">
                                        <div class="class-absolute">
                                          
                                            {{dataList[(7*i)+0].day}}
                                        </div>
                                        <div class="class-ban-day-blue" v-show="dataList[(7*i)+0].time" v-for="item in dataList[(7*i)+0].time"> {{item.intimes}}</div>
                                    </td>
                                    <td @click="tdclick" class="class-relative">
                                        <div class="class-absolute">
                                            {{dataList[(7*i)+1].day}}
                                        </div>
                                        <div class="class-ban-day-gary" v-show="dataList[(7*i)+1].time" v-for="item in dataList[(7*i)+1].time"> {{item.intimes}}</div>
                                    </td>
                                    <td @click="tdclick" class="class-relative">
                                        <div class="class-absolute">
                                            {{dataList[(7*i)+2].day}}
                                        </div>
                                        <div class="class-ban-day-blue" v-show="dataList[(7*i)+2].time" v-for="item in dataList[(7*i)+2].time"> {{item.intimes}}</div>
                                    </td>
                                    <td @click="tdclick" class="class-relative">
                                        <div class="class-absolute">
                                            {{dataList[(7*i)+3].day}}
                                        </div>
                                        <div class="class-ban-day-blue" v-show="dataList[(7*i)+3].time" v-for="item in dataList[(7*i)+3].time"> {{item.intimes}}</div>
                                    </td>
                                    <td @click="tdclick" class="class-relative">
                                        <div class="class-absolute">
                                            {{dataList[(7*i)+4].day}}
                                        </div>
                                        <div class="class-ban-day-blue" v-show="dataList[(7*i)+4].time" v-for="item in dataList[(7*i)+4].time"> {{item.intimes}}</div>
                                    </td>
                                    <td @click="tdclick" class="class-relative">
                                        <div class="class-absolute">
                                            {{dataList[(7*i)+5].day}}
                                        </div>
                                        <div class="class-ban-day-blue" v-show="dataList[(7*i)+5].time" v-for="item in dataList[(7*i)+5].time"> {{item.intimes}}</div>
                                    </td>
                                    <td @click="tdclick" class="class-relative">
                                        <div class="class-absolute">
                                            {{dataList[(7*i)+6].day}}
                                        </div>
                                        <div class="class-ban-day-blue" v-show="dataList[(7*i)+6].time" v-for="item in dataList[(7*i)+6].time"> {{item.intimes}}</div>

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- 老师视图 -->
                        <table style="border-collapse: collapse;" v-show="isActive==0&&nowNumber==2">
                                <thead style="background-color: rgb(239, 243, 248);">
                                    <tr class="theard">
                                        <td>老师</td>
                                        <td>周一({{cupnowDateList[0]}})</td>
                                        <td>周二({{cupnowDateList[1]}})</td>
                                        <td>周三({{cupnowDateList[2]}})</td>
                                        <td>周四({{cupnowDateList[3]}})</td>
                                        <td>周五({{cupnowDateList[4]}})</td>
                                        <td>周六({{cupnowDateList[5]}})</td>
                                        <td>周日({{cupnowDateList[6]}})</td>
                                    </tr>
                                </thead>
                                <tbody class="tbody-class">
                                    <tr v-for="item in teacherList">
                                        <td style="text-align: center">{{item.name}}</td>
                                        <td @click="tdclick" class="class-relative">
                                            <div class="class-absolute-teacher">
                                                <div class="class-ban-day-blue" v-for="one in item.week1">  {{one.class}}</div>
                                            </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week2">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week3">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week4">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week5">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week6">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week6">  {{one.class}}</div>
                                                </div>
                                        </td>
                                       
                                    </tr>
                                </tbody>
                            </table>
                        <!-- 教师视图 -->
                        <table style="border-collapse: collapse;" v-show="isActive==0&&nowNumber==3">
                                <thead style="background-color: rgb(239, 243, 248);">
                                    <tr class="theard">
                                        <td>教室</td>
                                        <td>周一({{cupnowDateList[0]}})</td>
                                        <td>周二({{cupnowDateList[1]}})</td>
                                        <td>周三({{cupnowDateList[2]}})</td>
                                        <td>周四({{cupnowDateList[3]}})</td>
                                        <td>周五({{cupnowDateList[4]}})</td>
                                        <td>周六({{cupnowDateList[5]}})</td>
                                        <td>周日({{cupnowDateList[6]}})</td>
                                    </tr>
                                </thead>
                                <tbody class="tbody-class">
                                    <tr v-for="item in roomList">
                                        <td style="text-align: center">{{item.name}}</td>
                                        <td @click="tdclick" class="class-relative">
                                            <div class="class-absolute-teacher">
                                                <div class="class-ban-day-blue" v-for="one in item.week1">  {{one.class}}</div>
                                            </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week2">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week3">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week4">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week5">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week6">  {{one.class}}</div>
                                                </div>
                                        </td>
                                        <td @click="tdclick" class="class-relative">
                                                <div class="class-absolute-teacher">
                                                    <div class="class-ban-day-blue" v-for="one in item.week6">  {{one.class}}</div>
                                                </div>
                                        </td>
                                       
                                    </tr>
                                </tbody>
                            </table>
                    </div>

                </div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/date.js"></script>
    <script>
       new Vue({
            el: '#app',
            data: {
                isActive:1,
                nowNumber:1,
                lastDay:"",
                nextDay:"",
                startTime:"",
                nowYear:"",
                nowMonth:"",
                endTime:"",
                arr:[],
                roomList:[
                    {
                        name:"1教室",
                        week1:[{class:"按天"},{class:"11:30"}],
                        week2:[{class:"按天"},{class:"11:30"}],
                        week3:[{class:"按天"},{class:"11:30"}],
                        week4:[{class:"按天"},{class:"11:30"}],
                        week5:[{class:"按天"},{class:"11:30"}],
                        week6:[{class:"按天"},{class:"11:30"}],
                        week7:[{class:"按天"},{class:"11:30"}]},
                        {
                        name:"广场3教室",
                        week1:[{class:"按天"},{class:"11:30"}],
                        week2:[{class:"按天"},{class:"8:30"}],
                        week3:[{class:"按天"},{class:"10:30"}],
                        week4:[{class:"按天"},{class:"11:30"}],
                        week5:[{class:"按天"},{class:"11:30"}],
                        week6:[{class:"按天"},{class:"11:30"}],
                        week7:[{class:"按天"},{class:"11:30"}]}
                ],
                teacherList:[{
                    name:"张龙",
                    week1:[{class:"按天"},{class:"11:30"}],
                    week2:[{class:"按天"},{class:"11:30"}],
                    week3:[{class:"按天"},{class:"11:30"}],
                    week4:[{class:"按天"},{class:"11:30"}],
                    week5:[{class:"按天"},{class:"11:30"}],
                    week6:[{class:"按天"},{class:"11:30"}],
                    week7:[{class:"按天"},{class:"11:30"}]},
                    {
                    name:"姚明",
                    week1:[{class:"按天"},{class:"11:30"}],
                    week2:[{class:"按天"},{class:"8:30"}],
                    week3:[{class:"按天"},{class:"10:30"}],
                    week4:[{class:"按天"},{class:"11:30"}],
                    week5:[{class:"按天"},{class:"11:30"}],
                    week6:[{class:"按天"},{class:"11:30"}],
                    week7:[{class:"按天"},{class:"11:30"}]}
			],


                weekList:[{weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
                {weeks:{morning:[{time:"按月"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
                {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
                {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
                {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
                {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
                {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}}],


                dataList:[{day:"30"},{day:"1",time:[{intimes:"按天"},{intimes:"按天"}]},{day:"2"},{day:"3"},{day:"4"},{day:"5",time:[{intimes:"按天"},{intimes:"按天"}]},{day:"6"},{day:"7"},{day:"8"},{day:"9"},{day:"10"},{day:"11"},{day:"12"},{day:"13"},{day:"14"},{day:"15"},{day:"16",time:[{intimes:"按天"},{intimes:"11:30"}]},{day:"17"},{day:"18"},{day:"19"},{day:"20"},{day:"21"},{day:"22"},{day:"23",time:[{intimes:"按天"},{intimes:"按天"}]},{day:"24"},{day:"25"},{day:"26",time:[{intimes:"按天"},{intimes:"按天"}]},{day:"27"},{day:"28"},{day:"29"},{day:"30"},{day:"31"},{day:"1",time:[{intimes:"按天"},{intimes:"18:30"}]},{day:"2"},{day:"3"},{day:"4"},{day:"5"},{day:"6"},{day:"7"},{day:"8"},{day:"9"},{day:"10"}]
            },
            methods:{
                leftClickMonth(){
                    this.nowMonth = this.nowMonth - 1;
                    if (this.nowMonth < 1) {
                        this.nowMonth = 12;
                        this.nowYear = this.nowYear - 1;
                    }
                    this.findToMonth()
                },
                rightClickMonth() {
                    this.nowMonth = this.nowMonth + 1;
                    if (this.nowMonth > 12) {
                        this.nowMonth = 1;
                        this.nowYear = this.nowYear + 1;
                    }
                    this.findToMonth()
               
                },
                findToMonth(){
                    let fatherDataList = getDateInfo(this.nowYear, this.nowMonth)
                    this.dataList.forEach((item,index)=>{
                        item.day =  fatherDataList[index].day 
                    })
                },
                dayClick(count){
                    this.isActive=count
                    this.nowNumber = 1
                },
                // 选择视图
                changeTips(count){
                    this.nowNumber=count
                    if(this.nowNumber == 1){
                        this.isActive = 1
                    }else{
                        this.isActive = 0
                    }
                   
                },
                nowDate(type, dates,date){
                    var now = ""
                    if(date){
                        now = new Date(date);
                    }else{
                        now = new Date()
                    }
                    
                    var nowTime = now.getTime();
                    var day = now.getDay();
                    var longTime = 24 * 60 * 60 * 1000;
                    var n = longTime * 7 * (dates || 0);
                    if (type == "s") {
                        var dd = nowTime - (day - 1) * longTime + n;
                    };
                    if (type == "e") {
                        var dd = nowTime + (7 - day) * longTime + n;
                    };
                    dd = new Date(dd);
                    var y = dd.getFullYear();
                    var m = dd.getMonth() + 1;
                    var d = dd.getDate();
                    m = m < 10 ? "0" + m: m;
                    d = d < 10 ? "0" + d: d;
                    var day = y + "-" + m + "-" + d;
                    return day;

                },
                leftClick(){
                    var d=this.getMonDate(this.nowDate("s",-1,this.arr[0]))
                        var arr=[];
                        for(var i=0; i<7; i++)
                        {
                        arr.push(d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate());
                        d.setDate(d.getDate()+1);
                        }
                        this.arr = arr
                        this.changeTime()
                        console.log(this.arr[0])

                },
                rightClick(){
                    var d=this.getMonDate(this.nowDate("s",1,this.arr[6]))
                        var arr=[];
                        for(var i=0; i<7; i++)
                        {
                            arr.push(d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate());
                        d.setDate(d.getDate()+1);
                        }
                        this.arr = arr
                        this.changeTime()
                        console.log(this.arr[6])
                },
                getWeeks(){
                   
                    var d=this.getMonDate(this.nowDate("s"))
                        var arr=[];
                        for(var i=0; i<7; i++)
                        {
                            arr.push(d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate());
                        d.setDate(d.getDate()+1);
                        }
                        this.arr = arr
                       
                },
                tdclick(){
                    console.log("dianji")
                },
                getMonDate(data){
                    var d=new Date(data)
                    day=d.getDay()
                    date=d.getDate()
                    if(day==1)
                    return d;
                    if(day==0)
                    d.setDate(date-6);
                    else
                    d.setDate(date-day+1);
                    return d;
                    },
                getDayName(day)
                        {
                        var day=parseInt(day);
                        if(isNaN(day) || day<0 || day>6)
                        return false;
                        var weekday=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
                        return weekday[day];
                        },
                changeTime(){
                let start = this.arr[0]
                let timelist =  start.split("-")
                this.startTime =  timelist[1]+"月"+timelist[2]+"日"


                let start2 = this.arr[6]
                let timelist1 =  start2.split("-")
                this.endTime =  timelist1[1]+"月"+timelist1[2]+"日"

                },
            },
            mounted(){
                this.getWeeks()
                this.changeTime()
                console.log()
                let date = new Date();
                this.nowYear = date.getFullYear();
                this.nowMonth = date.getMonth() + 1;
                let fatherDataList = getDateInfo(this.nowYear, this.nowMonth)
                this.dataList.forEach((item,index)=>{
                    item.day =  fatherDataList[index].day 
                })
                console.log(fatherDataList)
            },
            
            computed:{
                cupnowDateList(){
                    let array = []
                    this.arr.forEach((item,i)=>{
                       let ary = item.split("-")

                        array.push(ary[1]+"/"+ary[2])
                    })
                    return array
                }
                
            }
        })
    
    
    
    </script>
</body>
</html>